<template>
  <div id="main" v-infinite-scroll="loadTagList" infinite-scroll-delay="200">
    <el-card v-for="item in tagList" :key="item.objid" class="tag-item">
      <a :href="`/uIndex/tag?objid=${item.tagid}`" target="_blank">
        <el-image :src="item.canvasurl" fit="cover" style="height:350px;width:350px;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </a>
      <div class="tag-item-content">
        <div style="cursor: pointer;">
          <el-link style="font-size:20px;font-weight:400;" :underline="false" :href="`/uIndex/tag?objid=${item.tagid}`" target="_blank">{{item.title}}
          </el-link>
          <p style="white-space:pre-wrap;">简介：{{item.introduce || "暂无简介~"}}</p>
        </div>
        <div class="other-msg">
          <div class="author">
            作者：<el-link style="font-size:16px;" :underline="false" @click="toUserMsg(item.userid)">{{item.nickname}}</el-link>
          </div>
          <a class="vzcc" :href="`/uIndex/tag?objid=${item.tagid}`" target="_blank">
            <el-link type="info" :underline="false" icon="fa fa-eye" style="padding:0 5px;">浏览量({{item.view}})</el-link>
            <el-link type="info" :underline="false" icon="fa fa-heart" style="padding:0 5px;">赞({{item.fav}})</el-link>
            <el-link type="info" :underline="false" icon="fa fa-comments-o" style="padding:0 5px;">评论({{item.comments}})</el-link>
            <el-link type="info" :underline="false" icon="fa fa-clock-o" style="padding:0 5px;">发布时间: {{item.ctime}}</el-link>
          </a>
        </div>
      </div>
    </el-card>
    <p v-show="loading" v-loading="loading"></p>
    <p v-if="nomore" style="text-align:center">没有更多了~</p>
  </div>
</template>

<script>
import { getBeenSaveTagList } from "@/api/front/tag"
export default {
  data() {
    return {
      tagList: [],
      page: 1,
      limit: 10,
      loading: false,
      nomore: false
    }
  },
  created() {
  },
  computed: {
    keyword() {
      return this.$route.query.keyword
    }
  },
  methods: {
    //获取素材列表
    loadTagList(clearAll = false) {
      if (!this.nomore && !this.loading) {
        this.loading = true;
        getBeenSaveTagList({ page: this.page, limit: this.limit, keyword: this.keyword }, (res) => {
          if (res.code == 200) {
            if (clearAll) {
              this.tagList = []
            }
            if (res.data.length) {
              this.tagList.push(...res.data)
              this.page++;
            }
            else {
              this.nomore = true;
            }
          }
          this.loading = false;
        })
      }
    },
    toTag(objid) {
      this.$router.push({
        path: "/uIndex/tag",
        query: { objid: objid }
      })
    },
    //去个人信息
    toUserMsg(objid) {
      this.$router.push({
        path: "/uIndex/userMsg",
        query: { objid: objid }
      })
    }
  },
  watch: {
    "$route.query.keyword": {
      handler(val) {
        this.page = 1
        this.loading = false
        this.nomore = false
        this.loadTagList(true);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tag-item {
  width: 100%;
  background: none;
  margin: 5px 0;
  height: 100%;
  position: relative;
}
.tag-item-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(100% - 390px);
  height: calc(100% - 40px);
  overflow: hidden;
  padding: 20px 20px 20px 10px;
}

.other-msg {
  position: absolute;
  height: 30px;
  line-height: 30px;
  bottom: 30px;
  left: 0px;
  width: 100%;
}
.vzcc {
  position: absolute;
  right: 30px;
  top: 0px;
  width: calc(100% - 230px);
  text-align: right;
  display: block;
  text-decoration: none;
}
.author {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
}
</style>